<template>
   <div >
      <div class="HotelSales-header">
          <p class="HotelSales-headerP">该酒店总共销量</p>
          <h1 class="HotelSales-headerH1" >89604128</h1>
      </div>
      <div style="display: flex; justify-content: space-between;background: rgba(255, 255, 255, 1) ">
          <div class="HotelSales-Turnover" style="border-right:1px solid rgba(238,238,238,1);" @click="onDailysalesvolume" >
            <h1 class="HotelSales-TurnoverH1">951.88</h1>
            <p class="HotelSales-TurnoverP" >今日销量</p>
          </div>
             <div class="HotelSales-Turnover" style="border-right:1px solid rgba(238,238,238,1);">
            <h1 class="HotelSales-TurnoverH1">10000.85</h1>
            <p class="HotelSales-TurnoverP" >本周销量</p>
          </div>   <div class="HotelSales-Turnover">
            <h1 class="HotelSales-TurnoverH1">40008.00</h1>
            <p class="HotelSales-TurnoverP" >本月销量</p>
          </div>
      </div>
      <div style="height:10.4vw;">
          <p style="line-height: 10.4vw; margin-left:3.46vw;">销量明细</p>
      </div>
      <div style="overflow: hidden;  background: rgba(255, 255, 255, 1);" v-for="item in items" :key="item" @click="onHotelSalesDetails">
          <div class="HotelSales-etailed">
              <div class="HotelSales-etailedLeft">
                  <h1 class="HotelSales-etailedLeftH1">商品交易</h1>
                  <span class="HotelSales-etailedLeftSpan">2018-12-19</span>
              </div>
              <div class="HotelSales-etailedRight" >+4</div>
          </div>
          <div class="HotelSales-etailedSolid"></div>
      </div>
  </div>
</template>

<script>
// 酒店总销售量
export default {
  name: 'Totalalesvolume',
  data () {
    return {
      items: ['1', '2', '3', '4']
    }
  },
  methods: {
    onDailysalesvolume () {
      this.$router.push({ name: 'Dailysalesvolume' })
    },
    onHotelSalesDetails () {
      this.$router.push({ name: 'HotelSalesDetails' })
    }
  },
  created: () => {
    document.title = '北京华尔道'
  }
}
</script>

<style lang='scss' scoped>
.HotelSales-header {
  width: 100vw;
  height: 25.17vh;
  background:url("../../../assets/xiaoliang.png");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.HotelSales-headerP {
  font-size: 3.37vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.HotelSales-headerH1 {
  margin-top: 3vh;
  font-size: 11.73vw;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.HotelSales-Turnover {
  margin:2.99vh 0;
  width: 33.3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 1);
}
.HotelSales-TurnoverH1 {
  font-size: 4.8vw;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(22, 22, 22, 1);
}
.HotelSales-TurnoverP {
  margin-top: 2.66vw;
  font-size: 3.2vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(168, 168, 168, 1);
}
.HotelSales-etailed {
  overflow: hidden;
  width: 100vw;
  height: 11.83vh;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.HotelSales-etailedLeft {
  margin-left: 3.46vw;
}
.HotelSales-etailedLeftH1 {
  font-size: 4.53vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(22, 22, 22, 1);
  margin-bottom: 1.6vw;
}
.HotelSales-etailedLeftSpan {
  font-size: 3.2vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  color: rgba(134, 134, 134, 1);
}
.HotelSales-etailedRight {
  margin-right: 3.46vw;
  font-size: 4.53vw;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgba(22, 22, 22, 1);
}
.HotelSales-etailedSolid {
  float: right;
  width: 96vw;
  border-top: 1px solid rgba(238, 238, 238, 1);
}
</style>
